<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>rem适配</title>
		<script src="html5plus://ready"></script>
		<link rel="stylesheet" type="text/css" href="../../css/mui.min.css" />
		<script src="../../js/md5.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/flexible.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			html,
			body {
				background-color: #FFFFFF;
				height: 100%;
				margin: 0px;
				padding: 0px;
				overflow: hidden;
				-webkit-touch-callout: none;
				-webkit-user-select: none;
			}
			
			.mui-content {
				height: 100%;
				overflow: auto;
			}
			
			.mui-bar-nav~.mui-content {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-around;
				background: #fff;
				padding-top: 60px;
			}
			
			.item {
				width: 3.125rem;
				height: 4.375rem;
				background: #fff;
				padding: 0.3125rem 0 0.3125rem 0;
				float: left;
				position: relative;
			}
			
			.item .rexiao {
				position: absolute;
				top: 0;
				right: 0;
				display: inline-block;
				padding: 0 0.15625rem;
				background: red;
				font-size: 0.3125rem;
				color: #fff;
				border-radius: 5px;
				height: 0.625rem;
				line-height: 0.625rem;
				box-sizing: border-box;
			}
			
			.item img {
				width: 2.34375rem;
				height: 2rem;
				display: block;
				margin: 0 auto;
			}
			
			.mask_box img {
				width: 2.65625rem;
				height: 2.3125rem;
				display: block;
				margin: 0 auto;
			}
			
			.mask_box p {
				text-align: center;
				margin: 0;
				font-size: 0.4375rem;
				line-height: 0.4375rem;
				margin: 0.3125rem;
			}
			
			.item p {
				text-align: center;
				margin: 0;
				font-size: 0.4375rem;
				line-height: 0.4375rem;
			}
			
			.item .title {
				margin-top: 0.3125rem;
				color: #000000;
			}
			
			.item .price {
				margin-top: 0.25rem;
				color: orange;
			}
			
			.empty {
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				height: 22px;
				background: #d052bd;
				z-index: 1;
			}
			
			.mask_box {
				width: 6.71875rem;
				height: 7.5rem;
				background: rgb(241, 241, 241);
				position: fixed;
				top: 50%;
				left: 50%;
				margin-top: -3.75rem;
				margin-left: -3.359375rem;
				padding: 1.25rem 0.3125rem 0.625rem;
				border-radius: 20px;
			}
			
			.mui-content .mask_box p {
				margin-top: 0.3125rem;
			}
			
			.mask_box_btn {
				width: 100%;
				height: 0.9375rem;
				margin-top: 0.625rem;
			}
			
			.mask_box_btn button {
				width: 2.8125rem;
				height: 0.9375rem;
				outline: none;
				border-radius: 10px;
				box-sizing: border-box;
				padding: 0;
			}
			
			.mask_box_btn button:first-child {
				border: 1px solid orange;
				float: left;
				background: #fff;
				color: orange;
				font-size: 0.375rem;
				line-height: 0.375rem;
			}
			
			.mask_box_btn button:last-child {
				border: 1px solid orange;
				float: right;
				background: orange;
				color: #fff;
				font-size: 0.375rem;
				line-height: 0.375rem;
			}
			
			.mui-backdrop {
				display: none;
			}
			
			#compile {
				font-size: 15px;
				padding-top: 15px;
				padding-bottom: 15px;
			}
			
			.active {
				display: block;
			}
		</style>
	</head>

	<body>
		<div class="empty">

		</div>
		<header class="mui-bar mui-bar-nav">
			<a id="icon" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">礼物</h1>
			<a class="mui-pull-right mui-icon top_balok" id="compile">充值</a>
		</header>
		<div id="app" class="mui-content">
			<div v-for="(item,index) in items" :id="items[index].id" class="item" v-on:tap="ImgClick(item)">
				<span v-if="index<5" class="rexiao">热销</span>
				<img :src="items[index].gift_url|gifthtml" />
				<p class="title">{{items[index].gift_name}}</p>
				<p class="price">{{items[index].gift_price}}</p>
			</div>
			<div class="mui-backdrop" v-bind:class="{ active: isActive }">
				<div class="mask_box" :id="imgid">
					<img id="maskSrc" :src="imgSrc" />
					<p id="maskTitle" class="title">{{title}}</p>
					<p id="maskPrice" class="price">{{price}}</p>
					<div class="mask_box_btn">
						<button id="quxiao" type="button" class="mui-btn mui-btn-blue" @tap="endClick()">取消</button>
						<button id="send" type="button" class="mui-btn mui-btn-blue" @tap="sendClick()">赠送</button>
					</div>
				</div>
			</div>
		</div>

		<script src="../../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/md5.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/function.js" type="text/javascript" charset="utf-8"></script>
		
		<script type="text/javascript">
			var giftObj = [];
			var self = plus.webview.currentWebview();
			var rid = self.rid;
			var url2 = getApiUrl('http://www.jiaoyou0.cn', 'Chatsnew/postMessage');
			var vc = new Vue({
				el: "#app",
				data: {
					items: giftObj,
					price: '',
					imgSrc: '',
					imgid: '',
					title: '',
					surl:'',
					isActive: false
				},
				methods: {
					ImgClick: function(item) {
						vc.title = item.gift_name;
						vc.price = item.gift_price;
						vc.imgid = item.id;
						vc.surl = item.gift_url;
						vc.imgSrc = "../../img/gift/" + item.gift_url + ".png";
						vc.isActive = true;

					},
					endClick: function() {
						vc.isActive = false;
					},
					sendClick: function() {
						if(vc.imgid != 0) {
							sendgift(vc.imgid)
						}
					}
				},
				filters: {
					gifthtml: function(id) {
						return "../../img/gift/" + id + ".png";
					}
				}
			})
			
			var gifturl = getApiUrl('http://www.jiaoyou0.cn', 'Userdata/getgift');
			mui.ajax({
				type: "post",
				url: gifturl,
				async: true,
				success: function(data) {
					if(data.code == 200) {
						vc.items = data.data;
					}else{
						mui.toast('礼物列表加载失败，请重试')
					}
				}
			})
			
			document.getElementById("compile").addEventListener('tap', function(event) {
				openWallet('wallet.html',1)
			})

			function sendgift(giftid) {
				var chat = plus.webview.getWebviewById('Msg_Chat');
				var main = plus.webview.getWebviewById('My');
				mui.post(url2, {
					'receive_uid': rid,
					'type': 4,
					'content': giftid
				}, function(data) {
					if(data.code == 200) {
						user_info.coin = data.data;
						plus.storage.setItem('user_info', JSON.stringify(user_info));
						mui.fire(chat, 'sendgift', {
							giftid: vc.surl
						})
						mui.fire(main, 'myupdate');
						mui.toast('赠送成功！');
						mui.back();
					} else if(data.code == 201) {
						mui.toast('错误，请重试！')
					} else {
						mui.toast(data.message);
						openWallet('wallet.html',1)
					}
				}, 'json')
			}
		</script>

	</body>

</html>